:root {
  --monaco-c-black-1: rgb(51, 51, 51);
  --monaco-c-black-2: rgb(37, 37, 37);
  --monaco-c-black-3: rgb(30, 30, 30);
  --monaco-c-black-4: rgb(45, 45, 45);
  --monaco-c-black-5: rgb(42, 45, 46);
  --monaco-c-black-6: rgb(0, 0, 0);
  --monaco-c-gray-1: rgb(69, 69, 69);
  --monaco-c-gray-2: rgb(129, 129, 129);
  --monaco-c-gray-3: rgb(236, 236, 236);
  --monaco-c-gray-4: rgb(220, 220, 220);
  --monaco-c-gray-5: rgb(81, 81, 81);
  --monaco-c-gray-6: rgb(98, 98, 98);
  --monaco-c-gray-7: rgb(186, 186, 186);
  --monaco-c-gray-8: rgb(142, 142, 142);
  --monaco-c-white-1: rgb(255, 255, 255);
  --monaco-c-white-2: rgb(204, 204, 204);
  --monaco-c-white-3: rgb(243, 243, 243);
  --monaco-c-white-4: rgb(232, 232, 232);
  --monaco-c-blue-1: rgb(0, 127, 212);
  --monaco-c-blue-2: rgb(4, 57, 94);
  --monaco-c-blue-3: rgb(14, 99, 156);
  --monaco-c-blue-4: rgb(17, 119, 187);
  --monaco-c-blue-5: rgb(0, 96, 192);
  --monaco-c-blue-6: rgb(0, 122, 204);
  --monaco-c-blue-7: rgb(224, 238, 249);
  --monaco-c-brown-1: rgb(187, 122, 84);
  --monaco-c-pink-1: rgb(249, 241, 238);
  --monaco-c-red-1: rgb(196, 43, 28);

  --monaco-bg-base-1: var(--monaco-c-black-3);
  --monaco-bg-base-2: var(--monaco-c-black-2);
  --monaco-bg-button: var(--monaco-c-white-1);
  --monaco-bg-button-hover: var(--monaco-c-blue-7);
  --monaco-text-base-1: var(--monaco-c-white-2);
  --monaco-text-base-2: var(--monaco-c-white-1);
  --monaco-border-base-1: rgba(0, 0, 0, 0);
  --monaco-border-base-2: var(--monaco-c-blue-1);

  --monaco-bg-sysbar: var(--monaco-c-black-4);
  --monaco-text-sysbar-button: var(--monaco-c-gray-2);
  --monaco-text-sysbar-button-hover: var(--monaco-c-white-1);

  --monaco-bg-sysmodal: var(--monaco-c-white-1);
  --monaco-bg-sysmodal-title: var(--monaco-c-pink-1);
  --monaco-bg-sysmodal-footer: var(--monaco-c-white-3);
  --monaco-bg-sysmodal-close-focus: var(--monaco-c-red-1);
  --monaco-text-sysmodal: var(--monaco-c-black-5);
  --monaco-text-sysmodal-close-focus: var(--monaco-c-white-1);

  --monaco-bg-folders: var(--monaco-c-black-2);
  --monaco-bg-folders-item-active: var(--monaco-c-blue-2);
  --monaco-bg-folders-item-hover: var(--monaco-c-black-5);
  --monaco-bg-folders-item-new: var(--monaco-c-gray-1);
  --monaco-bg-folders-scrollbar-thumb: var(--monaco-c-gray-1);
  --monaco-bg-folders-scrollbar-thumb-hover: var(--monaco-c-gray-5);
  --monaco-bg-folders-scrollbar-thumb-active: var(--monaco-c-gray-6);
  --monaco-text-folders-item-active: var(--monaco-text-base-1);

  --monaco-bg-contextmenu: var(--monaco-c-black-2);
  --monaco-bg-contextmenu-hover: var(--monaco-c-blue-2);
  --monaco-border-contextmenu: var(--monaco-c-gray-1);

  --monaco-bg-openedtab-item: var(--monaco-c-black-4);
  --monaco-bg-openedtab-item-active: var(--monaco-c-black-3);
  --monaco-bg-openedtab-item-close-hover: var(--monaco-c-black-1);

  --monaco-bg-pages-item-hover: var(--monaco-c-black-2);
  --monaco-bg-pages-button: var(--monaco-c-blue-3);
  --monaco-bg-pages-button-hover: var(--monaco-c-blue-4);
  --monaco-bg-pages-select: var(--monaco-c-gray-1);
  --monaco-text-pages-button: var(--monaco-c-white-1);

  --monaco-bg-messagepopup-box: var(--monaco-c-black-2);
  --monaco-bg-messagepopup-box-hover: var(--monaco-c-black-4);
  --monaco-bg-messagepopup-box-shadow: var(--monaco-c-black-6);
  --monaco-border-messagepopup-box: var(--monaco-c-black-4);
}

.light {
  --monaco-bg-base-1: var(--monaco-c-white-1);
  --monaco-bg-base-2: var(--monaco-c-white-3);
  --monaco-text-base-1: var(--monaco-c-black-4);
  --monaco-text-base-2: var(--monaco-c-black-6);
  --monaco-border-base-1: var(--monaco-c-white-2);
  --monaco-border-base-2: var(--monaco-c-blue-1);

  --monaco-bg-folders: var(--monaco-c-white-3);
  --monaco-bg-folders-item-active: var(--monaco-c-blue-5);
  --monaco-bg-folders-item-hover: var(--monaco-c-gray-3);
  --monaco-bg-folders-item-new: var(--monaco-c-white-1);
  --monaco-bg-folders-scrollbar-thumb: var(--monaco-c-gray-7);
  --monaco-bg-folders-scrollbar-thumb-hover: var(--monaco-c-gray-8);
  --monaco-bg-folders-scrollbar-thumb-active: var(--monaco-c-gray-6);
  --monaco-text-folders-item-active: var(--monaco-c-white-1);

  --monaco-bg-contextmenu: var(--monaco-c-white-1);
  --monaco-bg-contextmenu-hover: var(--monaco-c-blue-5);
  --monaco-border-contextmenu: var(--monaco-c-gray-4);

  --monaco-bg-openedtab-item: var(--monaco-c-gray-3);
  --monaco-bg-openedtab-item-active: var(--monaco-c-white-1);
  --monaco-bg-openedtab-item-close-hover: var(--monaco-c-gray-4);

  --monaco-bg-pages-item-hover: var(--monaco-c-white-3);
  --monaco-bg-pages-button: var(--monaco-c-blue-6);
  --monaco-bg-pages-button-hover: var(--monaco-c-blue-3);
  --monaco-bg-pages-select: var(--monaco-c-white-1);
  --monaco-text-pages-button: var(--monaco-c-white-1);

  --monaco-bg-messagepopup-box: var(--monaco-c-white-3);
  --monaco-bg-messagepopup-box-hover: var(--monaco-c-white-4);
  --monaco-bg-messagepopup-box-shadow: var(--monaco-c-gray-2);
  --monaco-border-messagepopup-box: var(--monaco-c-white-2);
}

.monaco-tree-editor {
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  justify-content: flex-start;
  width: 100%;
  height: 100%;
  position: relative;
  color: var(--monaco-text-base-1);
  background-color: var(--monaco-bg-base-1);

  .minimap {
    z-index: 0 !important;
  }

  &-drag {
    width: 6px;
    background: rgba(0, 0, 0, 0);
    height: 100%;
    cursor: col-resize;
    flex-shrink: 0;

    &:hover {
      background: var(--monaco-border-base-2);
    }
  }

  &-area {
    flex: 1;
    min-width: 0;
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-start;
    position: relative;

    &-empty {
      position: absolute;
      left: 0;
      right: 0;
      top: 0;
      bottom: 0;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      user-select: none;

      span,
      svg {
        width: 50px;
        height: auto;
      }

      label {
        user-select: none;
        height: 50px;
        font-size: 24px;
        text-align: center;
      }
    }
  }

  &-prettier {
    position: absolute;
    right: 5px;
    top: 5px;
    cursor: pointer;
  }
}
